
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Clock, CheckCircle, RefreshCw, Play } from "lucide-react";

interface AssessmentModule {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  status: 'completed' | 'in-progress' | 'not-started';
  progress: number;
  estimatedTime: string;
  lastCompleted?: string;
  result?: string;
}

interface AssessmentModuleCardProps {
  module: AssessmentModule;
}

export function AssessmentModuleCard({ module }: AssessmentModuleCardProps) {
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed': return 'bg-green-100 text-green-700';
      case 'in-progress': return 'bg-yellow-100 text-yellow-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'completed': return <CheckCircle className="w-4 h-4" />;
      case 'in-progress': return <RefreshCw className="w-4 h-4" />;
      default: return <Play className="w-4 h-4" />;
    }
  };

  return (
    <Card className="hover:shadow-md transition-shadow">
      <CardHeader>
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
              {module.icon}
            </div>
            <div>
              <CardTitle className="text-lg">{module.title}</CardTitle>
              <CardDescription>{module.description}</CardDescription>
            </div>
          </div>
          <Badge className={getStatusColor(module.status)}>
            {getStatusIcon(module.status)}
            <span className="ml-1 capitalize">{module.status.replace('-', ' ')}</span>
          </Badge>
        </div>
      </CardHeader>
      
      <CardContent>
        <div className="space-y-4">
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span>Progress</span>
              <span>{module.progress}%</span>
            </div>
            <Progress value={module.progress} className="h-2" />
          </div>
          
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-1">
                <Clock className="w-4 h-4" />
                <span>{module.estimatedTime}</span>
              </div>
              {module.lastCompleted && (
                <div>
                  Completed: {module.lastCompleted}
                </div>
              )}
            </div>
            
            <div className="flex gap-2">
              <Button variant="outline" size="sm">
                View Results
              </Button>
              <Button size="sm" variant="outline">
                Retake
              </Button>
            </div>
          </div>
          
          {module.result && (
            <div className="bg-accent p-3 rounded-md">
              <span className="text-sm font-medium">Result: {module.result}</span>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}
